<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"></script>
</head>

<body>
    <div id="container"></div>
    <script>
        let Radar = G2Plot.Radar;
        let data = [
            { name: 'G2', star: 10371 },
            { name: 'G6', star: 7380 },
            { name: 'F2', star: 7414 },
            { name: 'L7', star: 2140 },
            { name: 'X6', star: 660 },
            { name: 'AVA', star: 885 },
            { name: 'G2Plot', star: 1626 },
        ];
        let radar = new Radar('container', {
            data: data.map((d) => ({ ...d, star: Math.sqrt(d.star) })),
            xField: 'name',
            yField: 'star',
            meta: {
                star: {
                    min: 0,
                    nice: true,
                },
            },
            area: {},
        });
        radar.render();
    </script>
</body>

</html>